// 模拟服务器上的传递过来的数据
let apiTypeData = [
    { name: "全部", keyword: "身份证实名", isnew: false },
    { name: "生活服务", keyword: "银行卡", isnew: false },
    { name: "金融科技", keyword: "短信", isnew: false },
    { name: "交通地理", keyword: "天气", isnew: false },
    { name: "充值缴费", keyword: "短信", isnew: false },
    { name: "数据智能", keyword: "手机归属地", isnew: false },
    { name: "企业工商", keyword: "IP", isnew: false },
    { name: "应用开发", keyword: "手机归属地", isnew: false },
    { name: "电子商务", keyword: "IP", isnew: false },
    { name: "吃喝玩乐", keyword: "视频", isnew: false },
    { name: "文娱视频", keyword: "视频", isnew: false },
    { name: "免费接口大全", keyword: "短信", isnew: true },
    { name: "短信", keyword: "身份证实名", isnew: false },
    { name: "汽车", keyword: "银行卡", isnew: false },
    { name: "核验", keyword: "银行卡", isnew: false },
    { name: "最新发布", keyword: "银行卡", isnew: true },
    { name: "API私有化部署", keyword: "身份证实名", isnew: true },
  ]

/* 
    0.遍历数组apiTypeData，把name属性组装成html代码，再把组装的html代码放进body-sort-key（页面API分类）
        注：通过判断数组的isnew属性，来给组装的html代码添加类名active（加粗样式）
*/
    //获取元素
    let bodySortKey=document.querySelector('.body-sort-key') //页面中API详细分类

    //定义变量保存组装好的数据
    let apiHtml=''

    //遍历apiTypeData数组
    apiTypeData.forEach(function(v){ //v：遍历数组里的每一个元素
    //拿到元素里的name，拼装数据
    apiHtml+=`
    <a href="#" class="${v.isnew?'active':''}" data-keyword="${v.keyword}">${v.name}</a>
    `
    //把组装好的数据apiHtml渲染到bodySortKey(页面中API详细分类)
    bodySortKey.innerHTML=apiHtml
  })


/*
    0.2 利用事件委派，将点击事件绑定到a标签的父级bodySortKey上，找到数据源，将当前事件源的文本
    渲染到搜索框里的search-api-tips上；获取当前数据源的自定义属性data-keyword，渲染到input框(search-text)的placeholder里
 */
    //获取元素
    let searchApiTips=document.querySelector('.search-api-tips') //搜索栏下的“全部”
    let searchText=document.querySelector('.search-text') //搜索栏下面的input框
  
    //给父节点绑定事件
    bodySortKey.addEventListener('click',function(e){ //e:事件对象
        //当前数据源为a标签
        if(e.target.nodeName==='A'){
            searchApiTips.textContent=e.target.textContent //渲染到span
            //获取当前事件源下面的自定义属性渲染到searchText里
            searchText.placeholder=e.target.dataset.keyword
        }
    })




//API列表区域 模拟服务器返回的数据
let listDataArr = [
    //第一行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
  
    //第二行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第三行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第四行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
  
  ]

/* 
    1.遍历数组listDataArr，组装数据为html代码，将数据渲染到body-list（列表）中
*/
    //获取变量
    let bodyList=document.querySelector('.body-list') //列表

    //定义变量保存组装好的数据
    let listHtml=''
    //遍历
    listDataArr.forEach(function(v){
        //组装数据
        listHtml+=`
        <li>
            <span class="${v.isSpecial===false?'dn':''}">企业专用</span>
            <a class="body-list-cont" href="./api-details.html">
                <img src="../imgs/${v.img}" alt="">
                <p class="cont-p1">${v.name}</p>
                <p class="${v.price==='免费'?'cont-p2':'cont-p3'}">${v.price}</p>
            </a>
            <a class="body-list-btn" href="#">申请数据</a>
        </li>
        `
        //渲染数据到body-list里
        bodyList.innerHTML=listHtml
    })
















    //获取元素
    let li = document.querySelectorAll('.body-list li') //列表
    let bodyListBtn = '' //body-list-btn（申请数据按钮）
    let bodyListCont = '' //body-list-cont（图片文本）

    let mask = document.querySelector('.mask') //蒙板
    let modal = document.querySelector('.modal') //模态框

    let user=document.querySelector('.input-text .user') //用户名
    let clearText=document.querySelector('.clear-text') //小叉叉

    let pwd=document.querySelector('.input-pwd .pwd') //密码
    let clearPwd=document.querySelector('.clear-pwd') //小叉叉

    let textTips=document.querySelector('.text-tips') //用户名错误提示文本
    let pwdTips=document.querySelector('.pwd-tips') //密码错误时的提示文本

    let loginBtn=document.querySelector('.login-btn') //登录

/* 
    1.鼠标移入li，显示body-list-btn（申请数据按钮）
        并带动body-list-cont（图片文本）上移
      鼠标移出，回到初始效果
*/
    //遍历
    li.forEach(function (dom) { //dom:遍历的每一个li
        //鼠标移入
        dom.addEventListener('mouseover', function () {
            //获取当前li下面的btn
            bodyListBtn = this.querySelector('.body-list-btn')
            bodyListBtn.style.opacity = '100' //透明度
            bodyListBtn.style.bottom = '16px' //显示

            //获取当前li下body-list-cont（图片文本）
            bodyListCont = this.querySelector('.body-list-cont')
            bodyListCont.style.paddingTop = '32px'
        })

        //鼠标移出
        dom.addEventListener('mouseout', function () {
            bodyListBtn.style.opacity = '0'
            bodyListBtn.style.bottom = '-35px'
            bodyListCont.style.paddingTop = '44px'
        })
    })



/* 
    2.鼠标点击body-list-btn（申请数据）,显示mask(蒙板)
*/
    //获取元素
    bodyListBtn = document.querySelectorAll('.body-list-btn') //申请数据按钮

    //遍历
    bodyListBtn.forEach(function (dom) { //遍历的每一个bodyListBtn申请数据按钮
        dom.addEventListener('click', function () {
            mask.style.display = 'block' //显示蒙板
        })
    })

/* 
    3.点击mask（蒙板）关闭（蒙板）
 */
    mask.addEventListener('click', function () {
        //console.log(1);
        mask.style.display='none'
    })


/*
    4.点击modal（模态框）阻止关闭mask（蒙板）
*/
    modal.addEventListener('click', function (e) {
        // console.log(1);
        e.stopPropagation()
    })

/* 
    5.当user（用户名）内容的长度大于0，显示clear-text（小叉叉）
        否则，隐藏
        input（表单输入内容）/ keyup（键盘抬起）事件
*/
    user.addEventListener('input',function(){
        if(user.value.length>0){
            clearText.style.display='block'
        }else{
            clearText.style.display='none' 
        }
    })

/* 
    6.当pwd（密码）内容长度大于0时，显示clear-pwd（小叉叉），否则隐藏
        input（表单输入内容）/ keyup（键盘抬起）事件
*/
    pwd.addEventListener('keyup',function(){
        if(pwd.value.length>0){
            clearPwd.style.display='block'
        }else{
            clearPwd.style.display='none'
        }
    })

/* 
    7.点击clearText，清空数据，并且隐藏clearText
*/
    clearText.addEventListener('click',function(){
        user.value='' //清空
        clearText.style.display='none'
    })
/* 
    8.点击clearPwd，清空数据，并且隐藏clearPwd
*/
    clearPwd.addEventListener('click',function(){
        pwd.value='' //清空
        clearPwd.style.display='none'
    })


/* 
    定义正则表达式
*/
    //定义用户名规则-----正则表达式
        let userReg=/^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/
    //定义密码规则
        let pwdReg=/^\d{6}$/ //6位数数字
/* 
    9.当user（用户名）失去焦点，判断是否合法
        若不合法，提示text-tips警告文本
*/   
    user.addEventListener('blur',function(){  
        //使用userReg.test验证输入的用户名是否正确----true/false（布尔值）
        let is=userReg.test(user.value)
        //判断
        if(is){ //默认是true
            textTips.textContent=``
        }else{
            textTips.textContent=`用户名错误`
        }
    })

/* 
    10.当pwd（密码）失去焦点，判断是否合法
        若不合法，提示pwd-tips警告文本
*/
    pwd.addEventListener('blur',function(){      
        //使用pwdReg.test验证密码是否合法 --true/false（布尔值）
        let is=pwdReg.test(pwd.value)
        //判断
        if(is){ //默认是true
            pwdTips.textContent=``
        }else{
            pwdTips.textContent=`密码错误`
        }
    })
/* 
    11.点击loginBtn(登录)，判断用户名密码是否合法，
        错误就添加提示文本，正确就跳转页面
*/
    loginBtn.addEventListener('click',function(){
        //判断
        if(!userReg.test(user.value)){
            textTips.textContent=`请输入正确的11位手机号`
        }else if(!pwdReg.test(pwd.value)){
            pwdTips.textContent=`请输入正确的6位数字密码`
        }else{
            location.href=''
        }
    })





/* 
    12.鼠标点击modal-login下面的a标签(账号登录/扫码登录)，给当前a标签添加激活属性（active）
        并显示当前a标签对应的内容（激活属性on)
*/
    
    
    //调用tab.js的函数（选项卡）
    tab('.modal-login a','#login')//modal-login下面的a标签，登录方式
